<html>
<head>
<style>
body {
  background-color: black;
  color: white;
}
</style>
<script>
window.onload = main;

var gl;
var canvas;

function loadShader(source, type) {
  var shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert(gl.getShaderParameter(shader,gl.INFO_LOG));
  }
  return shader;
}

function loadProgram(vertexShaderSource, fragmentShaderSource) {
  var vertexShader = loadShader(vertexShaderSource, gl.VERTEX_SHADER);
  var fragmentShader = loadShader(fragmentShaderSource, gl.FRAGMENT_SHADER);
  var program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    alert(gl.getProgramParameter(program, gl.INFO_LOG));
  }
  return program;
}

function main() {
  canvas = document.getElementById("mycanvas");
  gl = canvas.getContext("experimental-webgl");
  gl.clearColor(1, 0, 1, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);

  var positions = new Float32Array(
    [ 0.0, 0.0,
     50.0, 0.0,
     50.0, 50.0,
      0.0, 50.0]);

  var indices = new Uint16Array(
    [0, 1,
     1, 2,
     2, 3,
     3, 0]);

  var positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

  var indexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

  var program = loadProgram(
    document.getElementById("vertexShader").text,
    document.getElementById("fragmentShader").text);

  gl.useProgram(program);
  var positionLocation = gl.getAttribLocation(program, "position");
  gl.enableVertexAttribArray(positionLocation);
  gl.vertexAttribPointer(
      positionLocation,  // index
      2,                 // number of components per element
      gl.FLOAT,          // type of data
      false,             // normalized
      0,                 // stride
      0);                // offset

  var ploc = gl.getUniformLocation(program, "projection");
  var mloc = gl.getUniformLocation(program, "model");
  gl.uniformMatrix4fv(ploc, false,
    [2 / canvas.width, 0, 0, 0,
     0, -2 / canvas.height, 0, 0,
     0, 0, 1, 0,
     -1 + 1 / canvas.width, 1 - 1 / canvas.height, 0, 1]);

  for (var ii = 0; ii < 800; ii += 50) {
    gl.uniformMatrix4fv(mloc, false,
      [1, 0, 0, 0,
       0, 1, 0, 0,
       0, 0, 1, 0,
       ii, 0, 0, 1]);
    gl.drawElements(
        gl.LINES,           // what to draw
        8,                  // number of vertices
        gl.UNSIGNED_SHORT,  // type of indices
        0);                 // offset
  }
  for (var ii = 0; ii < 600; ii += 50) {
    gl.uniformMatrix4fv(mloc, false,
      [1, 0, 0, 0,
       0, 1, 0, 0,
       0, 0, 1, 0,
       0, ii, 0, 1]);
    gl.drawElements(
        gl.LINES,           // what to draw
        8,                  // number of vertices
        gl.UNSIGNED_SHORT,  // type of indices
        0);                 // offset
  }
}

</script>
<script id="vertexShader" type="something-not-js">
//
attribute vec4 position;
uniform mat4 projection;
uniform mat4 model;

void main(void) {
  gl_Position = projection * model * position;
}
</script>
<script id="fragmentShader" type="something-not-js">
//
void main(void) {
  gl_FragColor = vec4(1, 1, 0, 1);
}
</script>
</head>
<body>
<div>Pixel Perfect 2D in WebGL</div>
<canvas id="mycanvas" width="800" height="600"></canvas>
</body>
</html>
